<template>
  <div class="works">
    <div class="header">
      <router-link tag="div" to="/search" class="back">
        <van-icon name="arrow-left" color="#000" size="22rem" />
      </router-link>
      <h3>{{ type }}</h3>
    </div>
    <div class="list">
      <div
        class="item"
        v-for="list in worksList"
        :key="list.id"
        @click="toDetail(list.id)"
      >
        <div class="vedio">
          <!-- <img :src="list.cover" alt="" /> -->

          <van-image
            width="170rem"
            height="90rem"
            :src="(src = list.cover)"
            radius="10rem"
          >
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </div>
        <div class="text">
          <div class="title">
            <p>
              {{ list.title }}
            </p>
          </div>
          <div class="numbers">
            <span>播放量</span>
            <span>{{ NumberFilter(list.count.count_view) }}</span>
            <span>喜欢</span>
            <span>{{ NumberFilter(list.count.count_like) }}</span>
          </div>
          <div class="author" @click.stop="toUserinfo(list.id)">
            <div class="avatar">
              <img :src="list.author.userinfo.avatar" alt="" />
            </div>
            <div class="name">
              <p>{{ list.author.userinfo.username }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getWorks } from "../api/index";

import { useRouter } from "vue-router";
import { computed } from "@vue/runtime-core";

const $router = useRouter();
const id = $router.currentRoute.value.query.id;
const type = $router.currentRoute.value.query.type;
// console.log($router.currentRoute.value.query.id);

//获取数据

const worksList = ref([]);
getWorks(id).then((res) => {
  worksList.value = res.data.data.list;
  console.log(res.data.data);
});

const router = useRouter();
function toDetail(id) {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
}

function toUserinfo(id) {
  router.push({
    path: "/userinfo",
    query: {
      id,
    },
  });
}

const NumberFilter = computed(() => {
  return (value) => {
    if (value < 10000) {
      return value;
    } else {
      let w = value > 10000 ? value / 10000 : value;
      let y = w > 10000 ? (w / 10000).toFixed(1) + "亿" : w.toFixed(1) + "万";
      return y;
    }
  };
});
</script>

<style lang="scss" scoped>
.works {
  .header {
    border-bottom: 2rem solid #f5f5f5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: #fff;
    .back {
      position: fixed;
      top: 14rem;
      left: 10rem;
    }
    h3 {
      font-size: 16rem;
      color: #000;
      font-weight: bold;
      height: 50rem;
      line-height: 50rem;
      text-align: center;
    }
  }
  .list {
    padding: 50rem 15rem 15rem 15rem;
    .item {
      display: flex;
      border-bottom: 2rem solid #f5f5f5;
      padding: 15rem 0;
      // align-items: center;
      .vedio {
        margin-right: 10rem;
        img {
          width: 170rem;
          height: 90rem;
          border-radius: 10rem;
        }
      }
      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .title {
          p {
            font-size: 14rem;
            color: #000;
            font-weight: bold;
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            height: 40rem;
          }
        }
        .numbers {
          span {
            font-size: 12rem;
            color: #999;
            margin-right: 5rem;
          }
        }
        .author {
          display: flex;
          align-items: center;
          .avatar {
            img {
              width: 15rem;
              height: 15rem;
              border-radius: 50%;
              margin-right: 15rem;
            }
          }
          .name {
            p {
              width: 120rem;
              font-size: 14rem;
              color: #666;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}
</style>